<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品详情</title>
<!--设置标签图标-->
	<link href="favicon.ico" rel="shortcut icon">
	
	<style>
		li {
			display:inline-block;
		}
		body{
    background: white;
}
#bread_crumb{
    height: 44px;
    background: #f5f5f5;
}
#bread_crumb .bread_center{
    width: 1200px;
    margin: 0 auto;
    height: 44px;
    line-height: 44px;
}
#bread_crumb .bread_center a{
    color: black;
}

#detail{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-top: 10px;
}
#detail .detail_img{
    width: 400px;
    height: 400px;
    flex: 1;
    background: blue;
    border: 1px solid #ccc;
}
#detail .detail_img img{
    width: 100%;
    height: 100%;
}

#detail .detail_price{
    width: 700px;
    height: 400px;
    flex: 2;
    padding: 20px;

}
#detail .detail_price h3{
    font-size: 18px ;
    color: #666;
}
#detail .detail_price .goods_price{
    width: 70%;
    height: 80px;
    background: #f5f5f5;
    margin: 10px 0;
    padding: 20px;
}
#detail .detail_price .goods_price .ori_price{
    font-size: 15px;
    color: #666;
    position: relative;
}
#detail .detail_price  em{
    width: 60px;
    height: 1px;
    background: black;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 10px;
}
.yuan{
    font-size: 12px;
    color: #ff4400;
}
.price{
    color: #ff4400;
    font-size: 18px ;
    font-weight: normal;
}

#detail .goods_count{
    margin-top: 20px    ;
    margin-left: 5px;
    font-size: 15px;
}
#detail .goods_count input{
    border:  1px solid #ccc;
    width: 30px;
    height: 30px;
    padding-left: 10px;
    margin-left: 10px;
}

#detail .goods_buy input{
    padding: 10px 20px;
    background: #ff4400;
    color: white;
    font-size: 15px;
}
#introduce{
    width: 1200px;
    min-height: 50px;

    margin: 20px auto;

}
#introduce h3{
    font-size: 15px;
    font-weight: bold;
    background: #f5f5f5;
    height: 44px;
    line-height: 44px;
    padding-left: 15px;
}
	</style>

</head>
<body>
	<!--头部-->
	<jsp:include page="header.jsp"></jsp:include>
	
	<!--详情展示-->
	<div id="detail">
		<!--左侧-->
		<div class="detail_img">
			<img src="images/goods/${Good.getPimage()}"
				alt="">
		</div>
		<!--右侧-->
		<div class="detail_price">
			<h3>${Good.getPname() }</h3>
			<div class="goods_price">
				<p>
					价格： <i class="yuan">￥</i>
					<span class="price"><fmt:formatNumber type="number" pattern="0.00" value="${Good.getPprice()*1.0}" maxFractionDigits="2" /></span>
				</p>
				
				
			</div>
			<div class="goods_count">
				库存<label> ${Good.getStuck() }</label><br>
				<br>
				<br> 购买数量 <input type="text" id="count" value="1">
			</div>

			<div class="goods_buy mt50 ml5">
				<input id="btnJoin" type="button" value="加入购物车">
			</div>

		</div>

	</div>
	<!--尾部-->
	<jsp:include page="footer.jsp"></jsp:include>
	<script src="js/jquery.min.js"></script>
	<script src="js/layer/layer.js"></script>
	<script>
$(document).ready(function(){
	$("#btnJoin").click(function(){
		var id = ${Good.getPid()};
		var count = $("#count").val();
		$.post("CartServlet",{
			id:id,
			count:count
		},function(data){
			if(data=="OK"){
				alert('添加成功！', {icon: 1});
			}
			if(data=="Error2"){
				alert('库存量不足！', {icon: 2});
			}
			if(data=="noLogin"){
				alert('请先登录', {icon: 3});
				setTimeout("move()",2000);
			}
		})
	})
})
function move(){
	window.location.href='login.jsp';
}
</script>
</body>
</html>